<script lang="ts" setup>
import { ClickOutside as vClickOutside } from 'element-plus'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet.chinatmsproviders'
import { useGlobalStore } from '@/stores/modules/global'

interface MapLocation {
  lng: number
  lat: number
  address: string
  name: string
}

const popup1 = ref()
const popup2 = ref()
const mapPopoverRef = ref()
const openMapPopover = (trigger: HTMLElement, lat: number, lng: number) => {
  mapPopoverRef.value.show(trigger, lat, lng)
}
const mapChooseRef = ref()
const openMapChoose = () => {
  mapChooseRef.value.show(testLocation)
}
// 测试坐标（高德地图坐标）
const testLocation = reactive<MapLocation>({
  lng: 104.077703,
  lat: 30.655543,
  address: '四川省成都市锦江区春熙路街道香森宾馆春熙路',
  name: '春熙路'
})
const onMapChooseConfirm = (val: MapLocation) => {
  console.log('地图选点回调', val)
  testLocation.name = val.name
  testLocation.lng = val.lng
  testLocation.lat = val.lat
  testLocation.address = val.address
}
</script>

<template>
  <div class="map-container">
    <Map />

    <el-button class="choose-btn" type="success" size="default" @click="openMapChoose"
      >地图选点</el-button
    >
    <MapChoose ref="mapChooseRef" @confirm="onMapChooseConfirm" />

    <el-button
      class="popup1"
      ref="popup1"
      type="primary"
      size="default"
      @click="openMapPopover(popup1, 30.657401, 104.065861)"
      >天府广场</el-button
    >
    <el-button
      class="popup2"
      ref="popup2"
      type="primary"
      size="default"
      @click="openMapPopover(popup2, 39.905024, 116.393823)"
      >人民大会堂</el-button
    >
    <MapPopover ref="mapPopoverRef" />
  </div>
</template>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: calc(100vh - 100px);
}
.choose-btn {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 999;
  margin-left: -150px;
}
.popup1 {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 999;
}
.popup2 {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 999;
  margin-left: 150px;
}
</style>

<route lang="yaml">
meta:
  hideFooter: true
  noCard: true
</route>
